'use client'; // 在组件文件的开头添加这一行
import { Layout, Menu, MenuProps } from 'antd';
import { useRouter } from 'next/navigation';
import { MailOutlined } from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
import './clientLayout.scss';
type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
	// { key: '1', icon: <PieChartOutlined />, label: 'Option 1' },
	// { key: '2', icon: <DesktopOutlined />, label: 'Option 2' },
	// { key: '3', icon: <ContainerOutlined />, label: 'Option 3' },
	{
		key: 'interplate',
		label: '插值',
		icon: <MailOutlined />,
		children: [
			{ key: 'la', label: '拉格朗日' },
			{ key: 'niu', label: '牛顿' },
			// { key: '6', label: 'Option 6' },
			// { key: '7', label: 'Option 7' },
			// { key: '8', label: 'Option 8' },
		],
	},
];

interface Props {
	children: React.ReactNode;
}

const App: React.FC<Props> = ({ children }) => {

	const onSelect: MenuProps['onSelect'] = (e) => {
		console.log('onSelect ', e);
	};

	return (
		<Layout className="layout-container">
			<Sider theme="light">
				<Menu
					onSelect={onSelect}
					defaultSelectedKeys={['la']}
					defaultOpenKeys={['interplate']}
					mode="inline"
					theme="light"
					inlineCollapsed={true}
					items={items}
				/>
			</Sider>
			<Layout>
				<Header hasSider={false}>Header</Header>
				<Content>{children}</Content>
				<Footer>Footer</Footer>
			</Layout>
		</Layout>
	);
};

export default App;
